import React, { useState, useEffect } from 'react'
import { Table, Select, Input, Button, Modal, Tooltip } from 'antd'
import couponApi from '../../api/coupon.js'
const { Option } = Select;
const ProductModule = (props) => {
    const [state,setState] = useState({
		// 静态交互数据
		loading:false,
		queryForm: {
			projectTypeId: undefined,
			businessLevelId: undefined,
			name: '',
			code: '',
			page: 1,
			status: 1,
			rows: 30
		},
		businessSelect:[],//层次
		listData:{},//列表数据
		selectedProduct:[],//已选择的产品
    })

    //更新state
    const updateState = (newState)=>{
        let data = JSON.parse(JSON.stringify(state))
        setState(Object.assign({},data,newState))
    }
    useEffect(()=>{
		if(props.modalData.visible){
			getList(1)
		}else{
			updateState({selectedProduct:[]})
		}
    },[props.modalData.visible])
	const columns = [
		{
			title: '产品名称',
			dataIndex: 'name',
			width: 250,
			key: 'name',
			ellipsis:true,
			render: (text, record) => {
				return <div className="tool-tip">
						<Tooltip title={record.name}>
							<p>{record.name}</p>
						</Tooltip>
					</div>
			}
		},
		{
			title: '编码',
			dataIndex: 'code',
			width: 100,
			key: 'code'
		},
		{
			title: '产品标价',
			width: 100,
			dataIndex: 'standardPrice',
			key: 'standardPrice'
		}
	]
	const columns2 = [
		{
			title: '产品名称',
			dataIndex: 'name',
			width: 250,
			key: 'name',
			ellipsis:true,
			render: (text, record) => {
				return <div className="tool-tip">
						<Tooltip title={record.name}>
							<p>{record.name}</p>
						</Tooltip>
					</div>
			}
		},
		{
			title: '编码',
			dataIndex: 'code',
			width: 100,
			key: 'code'
		},
		{
			title: '授课方式',
			dataIndex: 'teachType',
			width: 100,
			key: 'teachType',
			render: (text, record) => {
				return <div>{['直播', '录播', '其他'][record.teachType - 1] || ''}</div>
			}
		},
		{
			title: '产品标价',
			width: 100,
			dataIndex: 'standardPrice',
			key: 'standardPrice'
		}
	]
	const columns3 = [
		{
			title: '产品名称',
			dataIndex: 'name',
			width: 250,
			key: 'name',
			ellipsis:true,
			render: (text, record) => {
				return <div className="tool-tip">
						<Tooltip title={record.name}>
							<p>{record.name}</p>
						</Tooltip>
					</div>
			}
		},
		{
			title: '编码',
			dataIndex: 'code',
			width: 100,
			key: 'code'
		},
		{
			title: '结算方式',
			dataIndex: 'cooperationType',
			width: 100,
			key: 'cooperationType',
			render: (text, record) => {
				return <div>{['充值扣费', '非充值扣费'][record.cooperationType - 1]  || ''}</div>
			}
		},
		{
			title: '授课方式',
			dataIndex: 'teachType',
			width: 100,
			key: 'teachType',
			render: (text, record) => {
				return <div>{['直播', '录播', '其他'][record.teachType - 1] || ''}</div>
			}
		},
		{
			title: '产品标价',
			width: 100,
			dataIndex: 'standardPrice',
			key: 'standardPrice'
		}
	]
    //分页对象
    const pageObj = {
        size:"small",
        total:state.listData.totalCount,
        pageSize:state.queryForm.rows,
        current:state.queryForm.page,
        showSizeChanger:true,
		pageSizeOptions:['30','50','100'],
        showTotal:()=>`共 ${state.listData.totalCount} 条`,
        onChange:(page)=>{    
            getList({page:page})
        },
        onShowSizeChange: (page, rows)=> {
            getList({page:1,rows:rows})
        }  
    }
    // 获取列表
    const getList = (data)=>{
        let obj = {
            page:data.page?data.page:state.queryForm.page,
            rows:data.rows?data.rows:state.queryForm.rows,
        }
		obj = Object.assign({},state.queryForm,obj)
		let postUrl = 'getProductList'
		if(props.productType==0){
			postUrl = 'getSelfProductList'
		}else if(props.productType==1){
			postUrl = 'getPlatformProductList'
		}
        couponApi[postUrl](obj,(res)=>{
			if(res){
				updateState({
					queryForm:obj,
					listData:res
				})
			}
        })
    }
	// 切换项目类型
	const changeProjectType = (val)=>{
		let queryForm = Object.assign({},state.queryForm,{projectTypeId:val,businessLevelId:undefined})
		if(val){
			// 获取层次
			couponApi.getBusinessLevelSelect({projectTypeId:val},res=>{
				if(res){
					updateState({
						queryForm:queryForm,
						businessSelect:res,
					})
				}
			})
		}else{
			updateState({
				queryForm:queryForm,
				businessSelect:[],
			})
		}
	}
	// 切换项目类型
	const changeBusinessLevel = (val)=>{
		let queryForm = Object.assign({},state.queryForm,{businessLevelId:val})
		updateState({queryForm:queryForm})
	}
	const changeName = (e)=>{
		let queryForm = Object.assign({}, state.queryForm, {name: e.target.value})
		updateState({queryForm:queryForm})
	}
	const changeCode = (e)=>{
		let queryForm = Object.assign({}, state.queryForm, {code: e.target.value})
		updateState({queryForm:queryForm})
	}
    //勾选配置
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            updateState({selectedProduct:selectedRows})
			// 赋值已选产品
			if(props.productType==1){//平台产品
				props.addProductPlatform(selectedRows)
			}else{//自营产品或自营机构产品
				props.addProductSelf(selectedRows)
			}
        },
        /* getCheckboxProps: (record) => ({
            disabled:record.status === 2,
            name: record.name,
        }), */
        selectedRowKeys:state.selectedProduct.map((v)=>{return v.id})
    }
    return <div style={{marginTop:20}}>
            {/* 操作栏 */}
            <div className="table-search-top" style={{marginBottom:20}}>
				<Select value={state.queryForm.projectTypeId} showSearch className="mr10" allowClear style={{ width: 180 }} onChange={changeProjectType} placeholder="项目类型">
					{props.projectSelect.map((v,i)=>{
						return <Option key={i} value={v.id}>{v.name}</Option>
					})}
				</Select>
				<Select value={state.queryForm.businessLevelId} showSearch className="mr10" allowClear style={{ width: 180 }} onChange={changeBusinessLevel} placeholder="层次">
					{state.businessSelect.map((v,i)=>{
						return <Option key={i} value={v.id}>{v.name}</Option>
					})}
				</Select>
				<Input className="mr10" value={state.queryForm.name} onChange={changeName} style={{ width: '170px' }} placeholder="产品名称" allowClear />
				<Input className="mr10" value={state.queryForm.code} onChange={changeCode} style={{ width: '170px' }} placeholder="产品编码" allowClear />
				<Button type="primary" className="mb30" onClick={()=>{getList({page:1})}}>搜索</Button>
			</div>
            {/* 表格 */}
            <Table dataSource={state.listData.recordList}
                rowSelection={rowSelection}
                columns={props.userInfo.originOrgType==0?columns:(props.productType==0?columns2:columns3)}
                pagination={pageObj}
                rowKey="id"
				scroll={{y:350}}
            ></Table>
        </div>
}

export default ProductModule